<template>
  <div class="app-container">
    <div class="search_container_warp">
      <el-form
        ref="queryFormRef"
        class="search_container"
        :model="queryParams"
        :inline="true"
      >
        <el-form-item label="赛项名称" prop="matchCode">
          <el-select
            v-model="queryParams.matchCode"
            @change="searchChangeFn"
            style="width: 360px"
          >
            <el-option
              v-for="item in eventDataList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="组别" prop="matchGroup">
          <el-select
            style="width: 120px"
            v-model="queryParams.matchGroup"
            clearable
            @change="matchGroupChangeFn"
          >
            <el-option
              v-for="item in matchGroupOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="schoolName" label="学校名称">
          <el-input
						style="width: 140px"
            v-model="queryParams.schoolName"
            clearable
            @keyup.enter="handleQuery"
          >
            <template #suffix>
              <el-icon
                class="el-input__icon searchIconClass"
                @click="handleQuery"
                ><search
              /></el-icon>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table
        ref="dataTableRef"
        class="customTableClass"
        v-loading="loading"
        :data="dataList"
        highlight-current-row
        show-summary
        border
      >
        <el-table-column 
					label="序号" 
					type="index" 
					align="center" 
					width="60" 
				/>
        <el-table-column 
					label="赛项名称" 
					prop="matchName" 
					min-width="160" 
				/>
        <el-table-column
          label="学校名称"
          prop="schoolName"
          align="center"
          min-width="160"
        />
        <el-table-column
          label="组别"
          prop="matchGroupName"
          align="center"
          width="90"
        />
        <el-table-column
          label="队伍数量"
          prop="teamQuantity"
          align="center"
          width="90"
        />
        <el-table-column
          label="队员数量"
          prop="stuNumber"
          align="center"
          width="90"
        />
        <el-table-column 
					label="备注" 
					prop="" 
					align="center" 
					min-width="120">
          <template #default="scope">
						{{scope.row.remark}}
          </template>
				</el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { getEventList } from "@/api/examManagement";
import { getDictionaryPage } from "@/api/examManagement";
import { getTeamStatisticsList } from "@/api/teamManagement";
import { ItemForm, Options } from "@/api/teamManagement/types";
import { queryFilter, moreQueryFilter, computeHeiht } from "@/utils/index";
const router = useRouter();

defineOptions({
  name: "TeamStatistics",
  inheritAttrs: false,
});
const queryFormRef = ref(ElForm);
const dataList = ref<ItemForm[]>([]);
const originaldataList = ref<ItemForm[]>([]);
const groupOptions = ref<Options[]>([]);
const matchGroupOptions = ref<any[]>([]);
const eventDataList = ref<any[]>([]);
const loading = ref(false);

const queryParams = reactive<ItemForm>({
  matchGroup: "",
  matchCode: "",
  matchId: "",
});

// 搜索选择赛项名称
function searchChangeFn(value: any) {
  queryParams.matchCode = value;
  eventDataList.value.forEach((v) => {
    if (v.value === value) {
      // 过滤事项对应的组别
      matchGroupOptions.value = v.matchGroupList.map((j: any) => {
        const { matchGroup, matchId } = j;
        // matchId // 赛项ID
        let item = { value: matchGroup, label: matchGroup, matchId: matchId };
        // 组装组别的key value
        groupOptions.value.forEach((k) => {
          if (matchGroup === k.value) {
            item.label = k.label;
          }
        });
        return item;
      });
    }
  });
  // 默认选择第一个组别
  if (matchGroupOptions.value?.length) {
    queryParams.matchGroup = matchGroupOptions.value[0].value;
    // queryParams.matchId = matchGroupOptions.value[0].matchId;
    matchGroupChangeFn(queryParams.matchGroup);
  }
}
// 选择组别
function matchGroupChangeFn(value: any) {
  queryParams.matchGroup = value;
  matchGroupOptions.value.forEach((v) => {
    if (value === v.value) {
      queryParams.matchId = v.matchId;
    }
  });
  query();
}

/** 查询 */
function handleQuery() {
  let { schoolName } = queryParams;
  let arr: Options[] = [{ label: "schoolName", value: schoolName || "" }];
  if (schoolName) {
    dataList.value = queryFilter(originaldataList.value, arr);
  } else {
    query();
  }
}

/** 接口查询 */
function query() {
  loading.value = true;
  getTeamStatisticsList(queryParams)
    .then(({ data }) => {
      const list = data.map((item: any) => {
        item.matchGroup += "";
        item.matchGroupName = groupOptions.value.find(
          (v) => v.value === item.matchGroup
        )?.label;
        return {
          ...item,
        };
      });
      dataList.value = list;
      originaldataList.value = list;
    })
    .finally(() => {
      loading.value = false;
    });
}

onMounted(async () => {
  loading.value = true;
  let { data } = await getDictionaryPage("MATCH_GROUP", 1);
  groupOptions.value = data.map((v: any) => {
    return {
      label: v.name,
      value: v.myKey,
    };
  });
  // 获取事项
  await getEventList()
    .then(({ data }) => {
      let codeList = new Map();
      let listData = data.map((item: any) => {
        item.matchGroup += ""; // 统一格式 字符串
        item.value = item.matchCode;
        item.label = item.matchName;
        // 把赛项下的组别收集起来
        if (!codeList.has(item.matchCode)) {
          codeList.set(item.matchCode, [
            { matchGroup: item.matchGroup, matchId: item.id },
          ]);
        } else {
          let list = codeList.get(item.matchCode);
          list.splice(list.length, 0, {
            matchGroup: item.matchGroup,
            matchId: item.id,
          });

          codeList.set(item.matchCode, list);
        }
        return item;
      });
      // 把赛项下的组别赋值
      listData.forEach((item: any) => {
        if (codeList.has(item.matchCode)) {
          item.matchGroupList = codeList.get(item.matchCode);
        }
      });
      // 过滤重复赛项
      let resultList = new Map();
      listData.forEach((v: any) => {
        if (!resultList.has(v.matchCode)) {
          resultList.set(v.matchCode, v);
        }
      });

      // eventDataList.value = [...listData];
      eventDataList.value = [...resultList.values()];
      searchChangeFn(eventDataList.value[0].value);
    })
    .finally(() => {
      loading.value = false;
    });
  // query();
  computeHeiht();
});
</script>
